<td-layout-nav-list
                    logo="assets:covalent"
                    navigationRoute="/"
                    toolbarTitle="Logs"
                    [opened]="media.registerQuery('gt-sm') | async"
                    [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'"
                    [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">
    <button mat-icon-button td-menu-button tdLayoutToggle>
      <mat-icon>menu</mat-icon>
    </button>
    <mat-nav-list td-sidenav-content [tdLayoutNavListClose]="!media.query('gt-sm')">
        <ng-template let-item let-last="last" ngFor [ngForOf]="products">
          <a mat-list-item [routerLink]="['/logs']">
            <mat-icon matListAvatar>{{item.icon}}</mat-icon>
            <h3 matLine> {{item.name}} </h3>
            <p matLine> product logs </p> 
          </a>
          <mat-divider *ngIf="!last" matInset></mat-divider>
        </ng-template>
    </mat-nav-list>
    <div td-toolbar-content layout="row" layout-align="start center" flex>
      <button mat-icon-button tdLayoutNavListOpen [hideWhenOpened]="true">
        <mat-icon>arrow_back</mat-icon>
      </button>
      <span>All Product Logs</span>
      <span flex></span>
    </div>
    <mat-card tdMediaToggle="gt-xs" [mediaClasses]="['push']">
      <mat-card-title>Logs</mat-card-title>
      <mat-divider></mat-divider>
      <ng-template tdLoading="items.load">
        <mat-list class="will-load" >
          <div class="md-padding" *ngIf="!items || items.length === 0" layout="row" layout-align="center center">
            <h3>No logs to display.</h3>
          </div>
          <ng-template let-item let-last="last" ngFor [ngForOf]="items">
            <mat-list-item [title]="item.description">
              <mat-icon matListIcon> {{item.icon}} </mat-icon>
              <h3 matLine> {{item.description}} <span class="md-caption tc-grey-600">({{item.created}})</span> </h3>
              <p matLine> {{item.name}} </p>
            </mat-list-item>
            <mat-divider *ngIf="!last"></mat-divider>
          </ng-template>
        </mat-list>
      </ng-template>
    </mat-card>
  </td-layout-nav-list>